<template>
  <div class="monitor-box" v-if="isFactor">
  	<div class="monitor-content">
  		<div v-for="item in factor" class="monitor-item" :key="item.id" :class="{active:item.active}" @click="activeFa(item)">
  			<img :src="item.active ? item.activeIcon: item.icon">
	  		<div>{{ item.title }}</div>
	  	</div>
  	</div>
  	<div class="detail" v-show="factor[1].active">
  		<my-automan ref="automan" :initTime='initime' v-if="factor[1].active"  @grid-timechange="autoGridtime" @close-automan="closeAutoman" @timechange="timeChange"></my-automan>
  	</div>
  	<div class="detail" v-show='factor[9].active'>
  		<env-el
  		ref="env"
  		@close-env="closeEnv"
  		@env-change='envTimeChage'
			:initTime='initime'
  		 />

  	</div>
  	<div class="detail" v-show="factor[4].active">
  		<my-radar ref="radar" :initTime='initime' v-if="factor[4].active" @close-radar="closeRadar" @radar-change="radarChange"></my-radar>
  	</div>
  	<div class="detail" v-show="factor[8].active">
  		<my-forecast ref="forecast"  :initTime='initime' v-if="factor[8].active" @close-forecast="closeForecast" @forecastChange="forecastChange"></my-forecast>
  	</div>
  	<div class="detail" v-show="factor[3].active">
  		<my-moon ref="moon" :initTime='initime'  v-if="factor[3].active" @close-moon="closeMoon" @moon-change="moonChange"></my-moon>
  	</div>
  	<div class="monitor-timeline" ref='monitortimeline' v-show="timelinewidth !== 0 && !factor[5].active && !factor[7].active&& !factor[10].active">
  		<my-datepicker @time-change="getInitTime"></my-datepicker>
  		<timeline ref="timeline"  @getmapDataP="getmapDataTime"></timeline>
  	</div>
  	<common ref="common"></common>
  </div>
</template>

<script>
import MyAutoman from './automan'
import EnvEl from './env'
import MyRadar from './radar'
import MyForecast from './forecast'
import MyMoon from './moon'
import timeline from '../base/timeline'
import MyDatepicker from '../base/datepicker'
import Vue from 'vue'
import common from '../common'
import QXMap from 'QXMap'
import {getMonitor, HTTPG, HTTPY} from '../../mock/mockdata.js'
// console.log(getMonitor[9].active)
const AREACODE = 330600000
export default {
	components: {
		MyAutoman,
		MyRadar,
		MyForecast,
		MyMoon,
		timeline,
		EnvEl,
		common,
		MyDatepicker
	},
	created() {
		this.factor = getMonitor
		this.isFactor = true
	},
	mounted() {
		let that = this
		this.timelinewidth = $('.monitor-box').width() - 80
		$(".monitor-box .monitor-timeline").width(this.timelinewidth)
	},
	data() {
		return {
			gridTime: [],
			gridData: '',
			timelinewidth: 0,
			factor: [],
			isFactor: false,
			automanFac: [],
			automanData: {},
			forecastFac: {},
			forecastInitTime: [],
			lightData: [],
			lightNum: 0,
			radarData: [],
			radarFac: {},
			moonFac: {},
			initime: null,
			automanTimeArr: [],
			refreshauto: false,
			waterType: '1',
			checkRadar: false,
			checkRadarType: {},
			gridTimeArr: [],
			envData:null
		}
	},
	watch: {
		initime: {
			handler: function(val, oldval) {
				//console.log(this.factor)
				for(let i=0; i<this.factor.length; i++){
					if(this.factor[i].active){
						if(this.factor[i].title === '闪电'){
							this.getLightingTime()
						}else if(this.factor[i].title === '天气'){
							this.getWeatherTime()
						}else if(this.factor[i].title === '水位'){
							this.getWaterLevelTime()
						}
						break
					}
				}
			}
		}
	},
	methods: {
		getInitTime(res) {
			//console.log(res)
			this.initime = res
		},
		activeFa(data) {
			this.checkRadar = false
			let haswind = false
			this.factor.forEach((obj) => {
				obj.active = false
			})
			data.active = true
			this.$emit('has-wind', data)

			if(data.title === "自动站"){
				let that = this
				this.$nextTick(()=>{
					that.$refs.automan.getLastTime()
				})
			}else if(data.title === "客观预报"){
				let that = this
				this.$nextTick(()=>{
					that.$refs.forecast.getLastTime()
				})
			}else if(data.title === "闪电"){
				this.getLightingTime()
			}else if(data.title === "雷达"){
				let that = this
				this.$nextTick(()=>{
					that.$refs.radar.getLastTime()
				})
			}else if(data.title === "卫星"){
				let that = this
				this.$nextTick(()=>{
					that.$refs.moon.getLastTime()
				})
			}else if(data.title === '天气'){
				this.getWeatherTime()
			}else if(data.title === '水位'){
				this.getWaterLevelTime()
			}else if(data.title === '预警'){
				this.getWarnInfo()
			}else if(data.title === '视频监控'){
				this.videoInfo()
				// return;
			}else if(data.title == "环保"){
				this.$nextTick(()=>{
					this.$refs.env.getListTime()
				})
				// this.envInfo()
			}
			this.$emit("isShow")
      this.$emit("init-warning")
			this.$emit('adjust-map', data.title)

		},
		closeAutoman() {
			this.factor[1].active = false
		},
		closeEnv(){
			console.log(34)
			this.factor[9].active = false
		},
		closeRadar() {
			this.factor[4].active = false
		},
		closeForecast() {
			this.factor[8].active = false
		},
		closeMoon() {
			this.factor[3].active = false
		},
		timeChange(data, num) {
			//console.log(data, num)
			if(num === 1){
				let num = data.length
				let factors = {}

				let Arrays = []
				for(let i=0; i<data.length; i++){
					Arrays.push(data[i].titleOfEn)
				}
				for(let i=0; i<Arrays.length; i++){
					for(let k=0; k<data.length; k++){
						if(Arrays[i] = data[k].titleOfEn){
							factors[Arrays[i]] = data[k].type
						}
					}
				}
				this.refreshauto = false
				this.autoGridtime([], [])

				//console.log(factors, data)
				this.$emit('auto-change', data, factors, [], this.refreshauto)
			}else if(num === 2 || num === 3){
				if(num === 2){
					this.refreshauto = false
				}else if(num === 3){
					this.refreshauto = true
				}
				this.automanFac = data
				let timeArr  = data[data.length-1].timeArr
				let timeType = data[data.length-1].timeType
				this.$refs.timeline.refreshTimeline(timeArr, timeType, 'end')
			}
		},
		envTimeChage(data,cureent){
			// console.log(data,cureent)
				let arr = []
				data.forEach(item=>{
					// console.log(item.observtimes)
					arr.push(item.observtimes)
				})

				this.envData = cureent
				this.$refs.timeline.refreshTimeline(arr,"hour", 'end')
		},

		getmapDataTime(option) {
			if(this.factor[1].active){
				// 如何判断当前是自动站还是雷达， 暂定
				let timeArr = []
				//console.log(this.automanFac)
				if(this.checkRadar){
					this.addRadar(option)
				}else{
					for(let i=0; i<this.automanFac.length; i++){
						let length = this.automanFac[i].timeArr.length - 1
						let item = {
							'type': '',
							'time': ''
						}
						item.type = this.automanFac[i].titleOfEn
						item.time = option
						timeArr.push(item)
					}
					this.getAutoData(timeArr)
				}
			}else if(this.factor[8].active){
				QXMap.removeGridMapProduct()
        		QXMap.removeVectorMapProduct()
				let time = option.replace(/\-/g,"").replace(" ","").replace(/\:/g,"").slice(0,12)+"00"
				if(!this.forecastFac.beiJing){
					time = this.$refs.common.getTimeCShow(time, -8*60)
				}
				let mapProductOptions
				let activeHour = this.$refs.common

				let starTime = this.forecastInitTime[0].slice(0,4)+"-"+this.forecastInitTime[0].slice(4,6)+"-"+this.forecastInitTime[0].slice(6,8)+" "+this.forecastInitTime[0].slice(8,10)+":"+this.forecastInitTime[0].slice(10,12)+":00"

				let timespan = (new Date(option) - new Date(starTime))/(60*60*1000) -8

				if(this.forecastFac.type === 'windv'){
					mapProductOptions = {
		                productcategory: this.forecastFac.type,
		                productcategory_U: this.forecastFac.productcategory_U,
		                productcategory_V: this.forecastFac.productcategory_V,
		                time: this.forecastInitTime[0],
		                regioncode: '330000',
		                method: this.forecastFac.nav,
		                interface: 'getContourEleByTimeAndRegionCode',
		                key: 'zjwlzx',
		                pwd: '123',
		                level: this.forecastFac.fcstlevel,
		                validtime: timespan,
		                gridmethod: this.forecastFac.nav,
		                gridinterface: 'getGridForecastEleGridInRectByTimeAndLevelAndValidtime',
		                nlat: 55,
		                slat: 18,
		                wlon: 110,
		                elon: 135,
		                iswind: true,
		                isshowzero: true,
		                isshowcontrol: true,
		                position: "topright",
		                isforecast: true,
		                isshowgridselect: false
		            }
				}else{
					mapProductOptions = {
		                productcategory: this.forecastFac.type,
		                time: this.forecastInitTime[0],
		                regioncode: '330000',
		                method: this.forecastFac.nav,
		                interface: 'getContourEleByTimeAndRegionCode',
		                key: 'zjwlzx',
		                pwd: '123',
		                level: this.forecastFac.fcstlevel,
		                validtime: timespan,
		                gridmethod: this.forecastFac.nav,
		                gridinterface: 'getGridForecastEleGridInRectByTimeAndLevelAndValidtime',
		                nlat: 55,
		                slat: 18,
		                wlon: 116,
		                elon: 125,
		                isshowzero: true,
		                isshowcontrol: true,
		                position: "topright",
		                isforecast:true
		            }
				}
				this.$emit('draw-forecast', mapProductOptions, option, this.forecastFac)

			}else if(this.factor[6].active){
				this.drawLight(option)
			}else if(this.factor[4].active){
				this.addRadar(option)
			}else if(this.factor[3].active){
				this.$emit('draw-moon', option, this.moonFac)
			}else if(this.factor[0].active){
				this.drawWeather(option)
			}else if(this.factor[2].active){
				this.drawWaterLevel(option)
			}else if(this.factor[9].active){
				this.drawEnv(option)
				// console.log("env")
			}
		},
		addRadar(option) {
			if(this.radarFac.titleOf === '雷达回波'){
				let time = option.replace(/\-/g,'').replace(" ","").replace(":","")+"00"
				time = this.$refs.common.getTimeCShow(time, -8*60)
				//console.log(time, option)
				for(let i=0; i<this.radarData.length; i++){
					if(this.radarData[i].FileTime === time){
						let imageProductParams = {
				           	nlat: 40.2,
				            slat: 20.2,
				            wlng: 110,
				            elng: 130,
				            opacity: 0.8,
				            type: this.radarData[i].Type,
				            url: this.radarData[i].Url
				        };
				        this.$emit("draw-radar", this.radarFac, imageProductParams, option)
				        break;
					}
				}
			}else if(this.radarFac.titleOf === '降水'){
				let time = option.replace(/\-/g,'').replace(" ","").replace(":","")+"00"
				let mapProductOptions = {
		            productcategory: this.radarFac.type,
		            time:time,
		            regioncode: '330000',
		            method: 'RADA_L3_MST_QPE',
		            interface: 'getContourByTimeAndRegionCode',
		            key: 'zjwlzx',
		            pwd: '123',
		            level: 0,
		            validtime:0,
		            gridmethod: 'RADA_L3_MST_QPE',
		            gridinterface: 'getRadarGridInRectByTimeAndLevelAndValidtime',
		            nlat: 55,
		            slat: 18,
		            wlon: 116,
		            elon: 125,
		            isshowzero: false,
		            isshowcontrol: true,
		            position: "topright",
		            isforecast: true,
		            isshowgridselect: false
		        }
		        this.$emit("draw-radar", this.radarFac, mapProductOptions, option)
			}
		},
		drawEnv(option){
			let time = option.replace(/[-,:,.," "]/ig,"")
			let type = this.envData.type
			let url = 'http://172.21.129.101:8080/ZJDataCenter/api/CAWN_ENV_MUL_HOR/getSurfEleInRegionByTime?userid=wlzx&pwd=123&dataformat=json&elements=Lat,Lon,Station_Id_C,Station_name,'+type+',Observtimes&times='+time+'&areacodes='+AREACODE+'&limitCnt=10000'
			this.$http.get(url).then(data=>{
				if(data.status==200){
					let json = data.data.DS
					// console.log(json)
					this.$emit('env-change',json, this.envData, this.factor[9],option)
				}

			})
		},
		getAutoData(timeArr) {
			//console.log('当前时间列表长度为'+timeArr.length)
			this.gridTimeArr = timeArr
			this.automanData = {}
			//console.log(timeArr, this.automanFac)
			for(let i=0; i<timeArr.length; i++){
				if(timeArr[i].type === 'water'){
					// 给水利获取时间
					this.automanTimeArr = []
					this.automanTimeArr.push(timeArr[i])
				}
				let time = timeArr[i].time.replace(/\-/g,"").replace(" ","").replace(/\:/g,"").slice(0,12)+"00"
				let url = ''
				if(this.automanFac[i].titleOfEn === 'water'){
					url = 'http://172.21.129.156:8081/web/rain/monitorPre?element='+this.automanFac[i].type+'&time='+time+'&type='+this.waterType

					// 超过阈值预警
					let maxUrl = 'http://172.21.129.156:8081/web/rain/threshold?param='+this.waterType
          console.log(maxUrl)
					this.$http.get(maxUrl)
					.then((res) => {
//						console.log(res)
						this.$emit('get-maxdata', res.body.DS)
					},(err) => {
						//console.log(err)
					})
				}else{
					url = HTTPG.url +this.automanFac[i].httpType+"/getSurfEleInRegionByTime?userid="+HTTPG.userid+"&pwd=123&dataformat=json&elements=Lat,Lon,Station_Id_C,Station_name,"+this.automanFac[i].type+"&times="+time+"&itemlist="+this.automanFac[i].itemlist+"&limitCnt="+this.automanFac[i].limitCnt+"&areacodes="+AREACODE
				}
//				console.log(url.indexOf("monitorPre"))
//        if(url.indexOf("monitorPre") !=-1)
//          continue
				this.$http.get(url)
				.then((res) => {
//				  return
//          console.log(res.body.DS)
					let resData = res.body.DS
					if(this.automanFac[i].titleOfEn === 'water'){
						resData = res.body.DS.DS
//            console.log(resData)
//            resData = []
					}
					if(this.automanData[this.automanFac[i].titleOfEn]){
						this.automanData[this.automanFac[i].titleOfEn] = resData
					}else{
//					  console.log(this.automanData)
//            delete this.automanData.water
						Vue.set(this.automanData, this.automanFac[i].titleOfEn, resData)
					}
					this.emitAuto(timeArr, false)
				},(err) => {
					//console.log(err)
				})
			}
	        // if(timeArr.length === 1){
	        	this.autoGridtime(timeArr, this.automanFac)
	        // }
		},
		emitAuto(timeArr, istrue) {
			let num = this.automanFac.length

			let factors = {}
			let Arrays = Object.keys(this.automanData)
			let namearray = {
				"refreshauto": ''
			}
			for(let i=0; i<Arrays.length; i++){
				for(let k=0; k<this.automanFac.length; k++){
					if(Arrays[i] = this.automanFac[k].titleOfEn){
						factors[Arrays[i]] = this.automanFac[k].type
						namearray[Arrays[i]] = []
						namearray[Arrays[i]].push(this.automanFac[k].name + "" + this.automanFac[k].titleOf)
						namearray[Arrays[i]].push(this.automanFac[k].timeType)
						namearray[Arrays[i]].push(this.automanFac[k].type)
					}
				}
			}
			if(istrue){
				namearray.refreshauto = true
			}else{
				namearray.refreshauto = this.refreshauto
			}

			if(num === Arrays.length){
				this.$emit('auto-change', this.automanData, factors, timeArr, namearray)
			}
		},
		forecastChange(res, fac) {
			//console.log(res, fac)
			let foreArray = []
			this.forecastFac = fac
			this.forecastInitTime = []
			this.forecastInitTime.push(res[0].time)
			this.forecastInitTime.push(res[0].hours)
			if(!fac.beiJing){
				if(parseInt(fac.num) === 0){
					for(let i=0; i<res.length; i++){
						let time = this.$refs.common.getTimeCShow(res[i].time, +(parseInt(res[i].hours)+8)*60)
						time = time.slice(0,4)+"-"+time.slice(4,6)+"-"+time.slice(6,8)+" "+time.slice(8,10)+":"+time.slice(10,12)+":00"
						foreArray.push(time)
					}
					this.$refs.timeline.refreshTimeline(foreArray, 'hour', 'start')
				}else{
					for(let i=0; i<res.length; i++){
						if(res[i].hours % fac.num === 0){
							let time = this.$refs.common.getTimeCShow(res[i].time, +(parseInt(res[i].hours)+8)*60)
							time = time.slice(0,4)+"-"+time.slice(4,6)+"-"+time.slice(6,8)+" "+time.slice(8,10)+":"+time.slice(10,12)+":00"
							foreArray.push(time)
						}
					}
					this.$refs.timeline.refreshTimeline(foreArray, 'hour', 'start')
				}
			}
		},
		getLightingTime() {
			let endTime = this.initime.replace(/\-/g,'').replace(/\:/g,'').replace(' ','')
			let starTime = this.$refs.common.getTimeCShow(endTime, -24*this.lightNum*60)
			let urls = HTTPG.url + "SURF_Wea_Cbf_THUND/getSurfEleByTimeRange?userid="+HTTPG.userid+"&pwd=123&dataformat=json&elements=observtimes,Lat,Lon,Lit_Current,Lit_Prov,Lit_City,Lit_Cnty,Lit_Town&timeRange=["+starTime+","+endTime+")&limitCnt=10000"
			this.$http.get(urls)
			.then((res) => {
				if(res.body.returnCode === -1){
					if(this.lightNum<30){
						this.lightNum++
						this.getLightingTime()
					}
				}else{
					this.lightData = res.body.DS
					let lightArray = []
					let initCompare = res.body.DS[res.body.DS.length-1].observtimes.slice(0,15)+"0:00"

					//console.log(this.lightData)
					let newLightArray = []
					for(let i=23; i>0; i--){
						initCompare = initCompare.replace(/\-/g,'').replace(" ",'').replace(/\:/g, '')
						let time = this.$refs.common.getTimeCShow(initCompare, -i*10)
						time = time.slice(0,4)+"-"+time.slice(4,6)+"-"+time.slice(6,8)+" "+time.slice(8,10)+":"+time.slice(10,12)+":00"
						newLightArray.push(time)
					}
					let timeCompare = newLightArray[newLightArray.length-1]
					timeCompare = timeCompare.replace(/\-/g,'').replace(/\:/g,"").replace(" ","")
					let lastCompare = this.$refs.common.getTimeCShow(timeCompare, +10)
					lastCompare = lastCompare.slice(0,4)+"-"+lastCompare.slice(4,6)+"-"+lastCompare.slice(6,8)+" "+lastCompare.slice(8,10)+":"+lastCompare.slice(10,12)+":00"
					newLightArray.push(lastCompare)

					this.$refs.timeline.refreshTimeline(newLightArray,"60-min", 'end')
				}
			},(err) => {
				//console.log(err)
			})
		},
		drawLight(time) {
			//console.log(time)
			let com = time.replace(/\-/g, '/')
			let compareA = (new Date(com)).getTime()
			//console.log(compareA)

			time = time.replace(/\-/g,'').replace(/\:/g,"").replace(" ","")
			let compareB = this.$refs.common.getTimeCShow(time, -10)
			compareB = compareB.slice(0,4)+"/"+compareB.slice(4,6)+"/"+compareB.slice(6,8)+" "+compareB.slice(8,10)+":"+compareB.slice(10,12)+":00"
			compareB = (new Date(compareB)).getTime()

			let drawArray = []
			for(let i=0; i<this.lightData.length; i++){
				let time = (new Date(this.lightData[i].observtimes)).getTime()
				if(time > compareB && time <= compareA){
					drawArray.push(this.lightData[i])
				}
			}
			this.$emit("draw-light", drawArray, compareA, compareB)
		},
		radarChange(res, fac) {
			this.radarData = res
			this.radarFac = fac
			if(fac.titleOf === '雷达回波'){
				let radarArray = []
				for(let i=0; i<res.length; i++){
					let time = this.$refs.common.getTimeCShow(res[i].FileTime, + 8*60)
					time = time.slice(0,4)+"-"+time.slice(4,6)+"-"+time.slice(6,8)+" "+time.slice(8,10)+":"+time.slice(10,12)
					radarArray.push(time)
				}
				this.$refs.timeline.refreshTimeline(radarArray, 'hour', 'end')
			}else if(fac.titleOf === '降水'){
				let radarArray = []
				for(let i=0; i<res.length; i++){
					let time = res[i].time.slice(0,4)+"-"+res[i].time.slice(4,6)+"-"+res[i].time.slice(6,8)+" "+res[i].time.slice(8,10)+":"+res[i].time.slice(10,12)
					radarArray.push(time)
				}
				this.$refs.timeline.refreshTimeline(radarArray, 'hour', 'end')
			}
		},
		moonChange(res, fac) {
			this.moonFac = fac
			let moonArray = []
			for(let i=res.length-1; i>=0; i--){
				let time = res[i].slice(0,4)+"-"+res[i].slice(4,6)+"-"+res[i].slice(6,8)+" "+res[i].slice(8,10)+":"+res[i].slice(10,12)+":"+res[i].slice(12,14)
				moonArray.push(time)
			}
			this.$refs.timeline.refreshTimeline(moonArray, 'hour', 'start')
		},
		getWeatherTime() {
			let endTime = this.initime.replace(/\-/g,'').replace(/\:/g,'').replace(' ','')
			let starTime = this.$refs.common.getTimeCShow(endTime, -60)
			let urls = HTTPY.url + 'SURF_ZJ_CTR_MUL_HOR/getSurfEleTimeListByTime?userid='+HTTPY.userid+'&pwd=123&level=0&productcategory=weather&time='+endTime+'&timetype=D&admincodes=330000&elements=time&limitcnt=20000&dataformat=json'
			this.$http.get(urls)
			.then((res) => {
				//console.log(res)
				let timeArr = []
				let startPoint = 0
				if(res.body.DS.length>24){
					startPoint = res.body.DS.length -24
				}
				for(let i=startPoint; i<res.body.DS.length; i++){
					let time = res.body.DS[i].time
					time = time.slice(0,4) +"-"+time.slice(4,6)+"-"+time.slice(6,8)+" "+time.slice(8,10)+":"+time.slice(10,12)+":00"
					timeArr.push(time)
				}

				this.$refs.timeline.refreshTimeline(timeArr,"min", 'end')
			},(err) => {
				//console.log(err)
			})
		},
		drawWeather(time) {
			let weathertime = time.replace(/\-/g,'').replace(" ","").replace(/\:/g, '')
			let mapProductOptions = {
	            productcategory: 'weather',
	            time: weathertime,
	            regioncode: '330000',
	            method: 'SURF_ZJ_CTR_MUL_HOR',
	            interface: 'getSurfEleByTimeAndRegionCode',
	            key: 'zjwlzx',
	            pwd: '123',
	            level:0,
	            gridmethod:'SURF_ZJ_GRID_MUL_HOR',
	            gridinterface:'getGridEleInRectByTimeAndLevelAndValidtime',
	            nlat: 32,
	            slat: 22,
	            wlon: 116,
	            elon: 124,
	            validtime: 0,
	            isshowzero: true,
	            isshowcontrol: true,
	            position: "topright",
	            opacity: 0.5
	        }
	        this.$emit('weather-change', mapProductOptions)
		},
		getWaterLevelTime() {
			let endTime = this.initime.replace(/\-/g,'').replace(/\:/g,'').replace(' ','')
			let startTime = this.$refs.common.getTimeCShow(endTime, -60*24)
			//console.log('getWaterLever的时间'+startTime, endTime)
			let urls = "http://172.21.129.101:8080/ZJDataCenter/api/SURF_Wea_Mwr_Rsvr_Hour/getSurfEleByTimeRangeAndStaID?userid=wlzx&pwd=123&dataformat=json&elements=Lat,Lon,Reservoir_level,Station_Id_C,Station_name,observtimes&timeRange=["+startTime+","+endTime+"]&staIds=RA005&limitCnt=10000"
			let timeArr = []
      let arr = []
			this.$http.get(urls)
			.then((res)=>{
				for(let i = res.body.DS.length-1; i >= 0; i--){
					let middle = res.body.DS[i]
					timeArr.push(middle)
          arr.push(middle.observtimes)
				}
				this.$refs.timeline.refreshTimeline(arr,"hour", 'end')
				// console.log(res)
//        this.$emit("init-warning")
			},(err)=>{
				//console.log(err)
			})
		},
		drawWaterLevel(time) {
			let timeB = time.replace(/\-/g,'').replace(/\:/g,'').replace(" ","")
			// let urls = "http://172.21.129.156:8081/web/rain/reservoirInfo?time="+timeB   //xiugaile
      let urls = "http://172.21.129.101:8080/ZJDataCenter/api/SURF_Wea_Mwr_Rsvr_Hour/getSurfEleInRegionByTime?userid=wlzx&pwd=123&dataformat=json&elements=Lat,Lon,Reservoir_level,Station_Id_C,Station_name&times="+timeB+"&areacodes="+AREACODE+"&limitCnt=10000"
			let RsvrWater="http://172.21.129.156:8081/web/rain/countRsvrWater"
      let RiverWater="http://172.21.129.156:8081/web/rain/countRiverWater"
      this.$http.get(urls)
			.then((res) => {
				//console.log(res)
				this.$emit('draw-waterlevel', res.body.DS, time)
			},(err) => {
				console.log(err)
			})
      this.$http.get(RsvrWater)
        .then((res) => {
          //console.log(res)
          this.$emit('draw-rsvrwater', res.body.result, time)
        },(err) => {
          console.log(err)
        })
      this.$http.get(RiverWater)
        .then((res) => {
          //console.log(res)
          this.$emit('draw-riverwater', res.body.result, time)
        },(err) => {
          console.log(err)
        })
		},
		getWarnInfo() {
			let url = HTTPY.url + 'SURF_ZJ_MUL_YJInfo/getSurfEle?userid='+HTTPY.userid+'&pwd=123&dataformat=json&elements=unitname,yjch,yjcontent'
			this.$http.get(url)
			.then((res)=>{
				let areachoose = [{'name': '萧山', "lon": '120.2800','lat': '30.1800','warninfo': []},
					{'name': '富阳', "lon": '119.9500','lat': '30.0500','warninfo': []},
					{'name': '诸暨', "lon": '120.2500','lat': '29.7000','warninfo': []},
					{'name': '嵊州', "lon": '120.8200','lat': '29.6000','warninfo': []},
					{'name': '上虞', "lon": '120.8200','lat': '30.0500','warninfo': []},
					{'name': '温州', "lon": '120.564','lat': '28.019','warninfo': []},
					{'name': '磐安', "lon": '120.4300','lat': '29.0500','warninfo': []},
					{'name': '东阳', "lon": '120.2200','lat': '29.2700','warninfo': []},
					{'name': '义乌', "lon": '120.0800','lat': '29.3300','warninfo': []},
					{'name': '浦江', "lon": '119.8800','lat': '29.4700','warninfo': []}]
				for(let i=0; i<res.body.DS.length; i++){
					for(let k=0; k<areachoose.length; k++){
						if(res.body.DS[i].unitname.match(areachoose[k].name)){
							areachoose[k].warninfo.push(res.body.DS[i])
						}
					}
				}
				this.$emit('draw-warn', areachoose)
				//console.log(res)
			},(err)=>{

			})
		},
		checkWaterType(res){
			this.waterType = res
			//console.log(res, this.automanTimeArr)
			for(let i=0; i<this.automanTimeArr.length; i++){
				if(this.automanTimeArr[i].type === 'water'){
					//console.log(this.automanFac[i])
					let time = this.automanTimeArr[i].time.replace(/\-/g,"").replace(" ","").replace(/\:/g,"").slice(0,12)+"00"
					let url = 'http://172.21.129.156:8081/web/rain/monitorPre?element='+this.automanFac[i].type+'&time='+time+'&type='+this.waterType
					this.$http.get(url)
					.then((res)=> {
						if(this.automanData[this.automanFac[i].titleOfEn]){
							this.automanData[this.automanFac[i].titleOfEn] = res.body.DS.DS
						}else{
							Vue.set(this.automanData, this.automanFac[i].titleOfEn, res.body.DS.DS)
						}
						this.emitAuto(this.automanTimeArr, true)
					},(err) =>{
						//console.log(err)
					})
				}
			}

		},
		videoInfo(){
			let url = 'http://172.21.129.156:8081/web/monitor/getInfo'
			this.$http.get(url)
					.then((res)=> {
						if(res.status == 200)
							this.$emit('video-change',res.body)
					},(err) =>{
						//console.log(err)
					})
		},
		envInfo(){

		},
		productAdd(res) {
			this.radarFac = res
			this.checkRadar = true
			let endTime = this.initime.replace(/\-/g,'').replace(/\:/g,'').replace(' ','')
			let startTime = this.$refs.common.getTimeCShow(endTime, -12*60)
			if(res.titleOf === '雷达回波'){
				let imageProductOptions = {
		        	productcategory: res.type,
		       	 	begintime: startTime,
		        	endtime: endTime
		    	}
		    	let that = this
		    	let products = QXMap.GetImageProductList(imageProductOptions, function (data) {

		    		if(data.DS.length !== 0){
		    			that.radarData = data.DS
		    			that.radarChange(data.DS, res)
		        	}
		        })
			}else if(res.titleOf === '降水'){
				let ajaxUrl= HTTPY.url + "RADA_L3_MST_QPE/getContourValidtimeListByTime?userid="+ HTTPY.userid +"&pwd=123&productcategory="+res.type+"&fcstlevel=0&time="+endTime+"&timetype=D&admincodes=330000&elements=time&limitcnt=200&dataformat=json"
				this.$http.get(ajaxUrl)
				.then((resData)=>{
					if(resData.body.DS.length !== 0){
						this.radarData = resData.body.DS
						this.radarChange(resData.body.DS, res)
					}
				},(err) => {

				})
			}
		},
		checktimeTitle(res) {
			if(!res){
				this.$refs.automan.getLastTime()
			}else{
				this.$refs.automan.checktimetitle(res)
			}
		},
		closetimeTitle(res) {
			this.$refs.automan.closetimetitle(res)
		},
		autoGridtime(time, res) {
			this.gridTime = time
			this.gridData = res

			if(time.length === 0){
				this.$emit('grid-change', '', '')
			}else{
				// if(res.)
				if(this.gridTimeArr.length === 1){
					if(this.gridData[0].gridtype){
						let timeB = this.gridTimeArr[0].time.replace(/\-/g,'').replace(/\:/g, '').replace(" ",'').slice(0,12)+"00"
						for(let i=0; i<this.gridTime.length; i++){
							if(this.gridData[0].gridtype === 'R1'){
								if(this.gridTimeArr[0].time.slice(0,12) === this.gridTime[i].time.slice(0,12)){
									timeB = this.gridTime[i].time
									break
								}
							}else{
								if(this.gridTimeArr[0].time.slice(0,10) === this.gridTime[i].time.slice(0,10)){
									timeB = this.gridTime[i].time
									break
								}
							}

						}
						timeB = timeB.replace(/\-/g,'').replace(/\:/g, '').replace(" ",'').slice(0,12)+"00"
						let chooseFlag = true
						if(this.gridData[0].titleOfEn === 'water'){
							chooseFlag = false
						}
						let typeB = this.gridData[0].gridtype
						let typedetail = this.gridData[0]
						//console.log(typeB)
						let mapProductOptions =
				        {
				            productcategory: this.gridData[0].gridtype,
				            time: timeB,
				            regioncode: '330000',
				            method: 'SURF_ZJ_CTR_MUL_HOR',
				            interface: 'getSurfEleByTimeAndRegionCode',
				            key: 'zjwlzx',
				            pwd: '123',
				            level: 0,
				            gridmethod:'SURF_ZJ_GRID_MUL_HOR',
				            gridinterface:'getGridEleInRectByTimeAndLevelAndValidtime',
				            nlat: 32,
				            slat: 22,
				            wlon: 116,
				            elon: 124,
				            validtime: 0,
				            isshowzero: chooseFlag,
				            isshowcontrol: true,
				            position: "topright",
				            opacity: 0.5
				        }
			        	this.$emit('grid-change', mapProductOptions, this.gridData[0])
			        }else{
						this.$emit('grid-change', '', '')
					}
		    	}else{
		    		this.$emit('grid-change', '', '')
		    	}
			}

		}
	}
}
</script>

<style lang="less">
.monitor-box{
    background: #092642;
	.monitor-content{
		background: #092642;
		height: 100%;
		text-align: center;
		position: fixed;
		z-index: 10;
		.monitor-item{
			padding: 10px 0;
			width: 80px;
			color: #fff;
			border-bottom: 1px solid #7C808F;
			cursor: pointer;
			&:hover,&.active{
				box-shadow: 0 5px 10px #7279BF inset;
				background: #15217B;
				border-bottom: 1px solid #15217B;
				& > div{
					color: #00DEFF;
				}
			}
			& > div{
				line-height: 28px;
			}
			& > img{
				width: 22px;
				height: 22px;
			}
		}
	}
	.detail{
		z-index: 10;
		position: absolute;
		top: 0;
		left: 90px;
		margin: 15px;
		background: rgba(71, 89, 132, 0.9);
	    border-radius: 5px;
	    & > div {
	    	border: 1px solid #596294;
    		border-radius: 5px;
    		box-shadow: #B6B7E0 0px 0px 2px 2px;
	    }
	    .detail-title{
	    	height: 30px;
		    text-align: center;
		    line-height: 30px;
		    color: #fff;
		    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	    }
	    .detail-content{
	    	width: 296px;
	    	padding-bottom: 10px;
	    	.detail-content-title{
	    		font-size: 12px;
	    		font-weight: 700;
	    		margin: 10px 0 0 0;
	    		height: 30px;
			    line-height: 30px;
			    padding-left: 10px;
	    		color: #FCFFA3;
    			font-size: 14px;
	    		background: rgba(255, 255, 255, 0.3);
	    	}
	    	.detail-content-lab{
	    		padding: 0 10px;
	    		&:after{
	    			display:block;
	    			clear:both;
	    			content:"";
	    			visibility:hidden;
	    			height:0;
	    		}
	    		& > div{
	    			float: left;
				    margin: 10px 10px 0 0;
				    text-align: center;
				    width: 80px;
				    height: 25px;
				    line-height: 25px;
				    border-radius: 5px;
				    color: #fff;
    				border: 1px solid #fff;
				    cursor: pointer;
				    overflow:hidden;
				    text-overflow:ellipsis;
				    white-space:nowrap;
				    &:hover{
				    	background: #3ED9FF;
				    	color: #0F2E48;
				    }
				    &.active{
				    	background: #3ED9FF;
				    	color: #0F2E48;
				    }
	    		}
	    	}
	    }
	    .detail-close{
    	    position: absolute;
		    top: 0;
		    right: 0;
		    line-height: 30px;
		    font-size: 26px;
		    margin-right: 10px;
		    color: #aaa;
		    cursor: pointer;
	    }
	}
	.monitor-timeline{
		position: fixed;
		bottom: 10px;
		right: 0;
		// width: 90%;
		background: #fff;
		z-index: 10;
		.datepicker{
			float: left;
			width: 15%;
			box-sizing: border-box;
    		padding: 6px 16px;
		}
		.timebox{
			float: left;
			box-sizing: border-box;
			width: 85%;
		}
	}
}
.clear_float:after{
	display: block;
	content: '';
	clear: both;
}
</style>
